import Taro, { useRouter } from "@tarojs/taro";
import { useState, useEffect } from "react";
import {
  View,
  Form,
  Button,
  Input,
  Picker,
  Text,
  Textarea,
} from "@tarojs/components";
import request from "@/utils/request";

import "./index.scss";

const address = () => {
  const router = useRouter();
  const [region, setregion] = useState([]);
  const [flag, setFlag] = useState(0);
  const [form, setForm] = useState({
    name: "",
    tel: "",
    region: [],
    detailaddr: "",
  });
  const changeName = (e) => {
    console.log(e.detail.value);
    setForm({ ...form, name: e.detail.value });
  };
  const changeTel = (e) => {
    setForm({ ...form, tel: e.detail.value });
  };
  const changeTxt = (e) => {
    setForm({ ...form, detailaddr: e.detail.value });
  };
  const bindRegionChange = (e) => {
    // console.log("picker发送选择改变，携带值为", e.detail.value);
    setregion(e.detail.value);
    // console.log("form", { ...form, region: e.detail.value });
    setForm({...form,region:e.detail.value})
  };

  useEffect(() => {
    console.log(router.params.ele);
    if (router.params.ele) {
      let ele = JSON.parse(router.params.ele);
      setForm(ele);
    }
    setFlag(flag + 1);
    return () => {};
  }, []);
  useEffect(() => {
    if (flag === 1) {
      console.log(form);
      setregion(form.region);
    }
    return () => {};
  }, [flag]);

  const subForm = (e) => {
    let data = e.detail.value;
    if (form._id) {
      data = { ...data, _id: form._id, region };
    }
    console.log(data);
    request("/addr/add", "post", data).then((res) => {
      console.log(res);
      if (res.err === 0) {
        Taro.showToast({
          title: res.msg,
          duration: 2000,
          success() {
            setTimeout(() => {
              Taro.navigateTo({
                url: "../shipping/shipping",
              });
            }, 1000);
          },
        });
      } else {
        Taro.showToast({
          title: res.msg,
          duration: 2000,
        });
      }
    });
  };
  return (
    <View className="address">
      <Form className="form" onSubmit={subForm}>
        <View className="take">
          <Text className="name">收货人</Text>
          <Input
            type="text"
            name="name"
            value={form.name}
            placeholder="填写名字"
            onBlur={changeName}
          />
        </View>
        <View className="tel">
          <Text>联系电话</Text>
          <Input
            placeholder="填写手机"
            onBlur={changeTel}
            value={form.tel}
            name="tel"
          />
        </View>
        <View className="region">
          <Text>所在区域</Text>
          <Picker
            className="pick"
            mode="region"
            onChange={bindRegionChange}
            value={region}
          >
            {region && region.length === 0 ? (
              <Text className="xz">请选择 ></Text>
            ) : (
              <Text>{region[0] + region[1] + region[2] + "  >"}</Text>
            )}
          </Picker>
        </View>
        <Textarea
          placeholder="填写详情地址"
          name="detailaddr"
          className="txtarea"
          value={form.detailaddr}
          onBlur={changeTxt}
        ></Textarea>
        <Button className="sub" formType="submit">
          保存
        </Button>
      </Form>
    </View>
  );
};

export default address;
